/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Fragment } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,

  Button,
  AsyncStorage,
  StatusBar,
} from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

const KEY = 'value_key'
export default class AsyncStorageDemoPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showText: ''
    }
  }

  loadData() {

    let url = `https://api.github.com/search/repositories?q=${this.searchKey}`

    fetch(url)
      .then(response => { console.log("sss", response); return response.text() })
      .then(responseText => {
        this.setState({
          showText: responseText
        })
      })

  }

  doSave() {
    AsyncStorage.setItem(KEY, this.value, error => {
      error && console.log(error.toString())
      this.setState({
        showText: error && error.toString()
      })
    })
  }
  doRemove(){
    AsyncStorage.removeItem(KEY,error=>{
      error && console.log(error.toString())
    })
    
  }
  getData(){
    AsyncStorage.getItem(KEY)
    .then(val=>{
      this.setState({
        showText:val
      })
    })
    .catch(e=>{
      error && console.log(error.toString())
    })
  }


  render() {
    return (
      <View style={styles.sectionContainer}>
        <Text style={styles.welcome}>Fetch 使用</Text>

          <TextInput
            style={styles.input}
            onChangeText={text => {
              this.value = text
            }}
          />
          <View style={styles.inputWrap}>
          <View>
            <Button
              title={'保存'}
              onPress={() => {
                this.doSave()
              }}
            />
            <Button
              title={'获取'}
              onPress={() => {
                this.getData()
              }}
            />
            <Button
              title={'删除'}
              onPress={() => {
                this.doRemove()
              }}
            />
          </View>


        </View>

        <Text >{this.state.showText}</Text>
      </View>
    )
  }

};

const styles = StyleSheet.create({

  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#333',
  },
  inputWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  input: {
    marginRight: 30,
    height: 40,
    lineHeight: 40,
    borderColor: 'black',
    borderWidth: 1
  }

});


